<template>
  <div class="city">
    <ul class="citys" v-for="items in citys" :city="citys.initial">
      <li>{{items.initial}}</li>
      <li v-for="itm in items.list"><span>{{itm.name}}</span></li>
    </ul>
  <ul class="nav">
    <li @touchstart='touch(0)'>A</li>
    <li @touchstart='touch(1)'>B</li>
    <li @touchstart='touch(2)'>C</li>
    <li @touchstart='touch(3)'>D</li>
    <li @touchstart='touch(4)'>E</li>
    <li @touchstart='touch(5)'>F</li>
    <li @touchstart='touch(6)'>G</li>
    <li @touchstart='touch(7)'>H</li>
    <li @touchstart='touch(8)'>I</li>
    <li @touchstart='touch(9)'>J</li>
    <li @touchstart='touch(10)'>k</li>
    <li @touchstart='touch(11)'>L</li>
    <li @touchstart='touch(12)'>M</li>
    <li @touchstart='touch(13)'>N</li>
    <li @touchstart='touch(14)'>O</li>
    <li @touchstart='touch(15)'>P</li>
    <li @touchstart='touch(16)'>Q</li>
    <li @touchstart='touch(17)'>R</li>
    <li @touchstart='touch(18)'>S</li>
    <li @touchstart='touch(19)'>T</li>
    <li @touchstart='touch(20)'>U</li>
    <li @touchstart='touch(21)'>V</li>
    <li @touchstart='touch(22)'>W</li>
    <li @touchstart='touch(23)'>X</li>
    <li @touchstart='touch(24)'>Y</li>
    <li @touchstart='touch(25)'>Z</li>
  </ul>
  </div>

</template>

<script>
import $ from 'jQuery'
const citys = require('../Common/js/citys.js')
console.log(citys)
export default {
  data () {
    return {
      citys: citys.default,
      citysObj: ''
    }
  },
  methods: {
    touch (idx) {
      // console.log(this.citysObj)
      var idxheight = this.citysObj[idx].offsetTop - 44
      window.scrollTo({
        top: idxheight,
        behavior: 'smooth',
        speed: 1000
      })
    }
  },
  created () {

  },
  mounted () {
    this.citysObj = $('.citys')
    console.log($('.citys'))
  }
}
</script>

<style>
.city{
  width: 100%;
  height: auto;
  background-color: #eeeeee;
}
.citys{
  width: 7.5rem;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.citys li{
  width: 6.9rem;
  height: 0.5rem;
  padding: 0 0.3rem;
  text-align: left;
  font-size: 0.28rem;
  color: #222222;
  line-height: 0.5rem;
}
.citys li:nth-child(n + 2){
  background-color: #ffffff;
  height: 0.8rem;
}
.citys li:nth-child(n + 2) span{
  height: 0.78rem;
  line-height: 0.8rem;
  border-bottom: 0.02rem solid #e2e2e2;
  display: block;
}
.citys li:last-of-type span{
  border-bottom: none;
}
.nav{
  position: fixed;
  width: 0.6rem;
  height: 9.1rem;
  right: 0;
  top: 50%;
  margin-top: -4.55rem;
  background-color: rgba(0,0,0,0.2)
}
.nav li{
  width: 100%;
  height: 0.35rem;
  font-size: 0.28rem;
  color: #222222;
  line-height: 0.35rem;
  text-align: center;
}
</style>
